<template>
	<el-dialog title="新 增" :visible.sync="thisAddPage" :before-close="handleClose">
		<el-form ref="categoryFrom" :model="categoryFrom" label-width="100px" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-form-item label="分类名称" prop="categoryName">
						<el-input v-model="categoryFrom.categoryName" placeholder="请输入分类名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分类编码" prop="categoryCode">
						<el-input v-model="categoryFrom.categoryCode" placeholder="请输入分类编码" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="分类类型" prop="categoryType">
						<el-select v-model="categoryFrom.categoryType" placeholder="请选择分类类型" @change="selectCategoryType" style="width: 100%;">
							<el-option label="一级" :value="1"></el-option>
							<el-option label="二级" :value="2"></el-option>
							<!-- <el-option label="三级" :value="3"></el-option> -->
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否启用" prop="isEnable">
						<el-radio v-model="categoryFrom.isEnable" label="0">否</el-radio>
						<el-radio v-model="categoryFrom.isEnable" label="1">是</el-radio>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row v-show="showFirstCategory || showSecondCategory">
				<el-col :span="12">
					<el-form-item label="一级分类" prop="firstLevelId" v-show="showFirstCategory">
						<el-select v-model="categoryFrom.firstLevelId" placeholder="请选择所属一级分类" @change="selectFirstCategory" style="width: 100%;">
							<el-option v-for="item in firstCategoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input type="number" v-model="categoryFrom.sort" placeholder="请输入排序" clearable></el-input>
					</el-form-item>
				</el-col>
				
				<!-- <el-col :span="12">
					<el-form-item label="二级分类" prop="secondLevelId" v-show="showSecondCategory">
						<el-select v-model="categoryFrom.secondLevelId" placeholder="请选择所属二级分类" style="width: 100%;">
							<el-option v-for="item in secondCategoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
			</el-row>
			
			<el-row v-if="showFirstCategory && isCanEditPlatformCategory">
				<el-col :span="12">
					<el-form-item label="关联首页分类" prop="platformCategoryId">
						<el-select v-model="categoryFrom.platformCategoryId" placeholder="请选择首页展示分类" style="width: 100%;">
							<el-option v-for="item in platformCategoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" v-model="categoryFrom.remark" placeholder="请输入备注" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="24">
					<el-form-item label="分类图片" prop="categoryPicture" v-show="showCategoryPicture">
						<el-card shadow="hover" class="el-card-logo">
							<el-image :src="imgObject.localMainImage">
								<div slot="error" class="image-slot">
									<i>请添加分类图片</i>
								</div>
							</el-image>
						</el-card>
						
						<div style="margin-top: 12px;">
							<el-button type="primary" plain @click="addPic" icon="md-add"> 添加图片 </el-button>
							<span style="color: red; margin-left: 20px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</span>
						</div>
						<keep-alive>
							<uploadImage :pageStatus="isPic" @on-change="onPicChange" @on-result="onPicResult" :pageData="imgType" @on-click="addPic"></uploadImage>
						</keep-alive>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		
		<div slot="footer">
			<el-button type="primary" @click="onSubmit('categoryFrom')">保 存</el-button>
			<el-button @click="resetForm('categoryFrom')">重 置</el-button>
			<el-button @click="closeAddChange">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import { save, findAllFirstList, findAllSecondList } from '@api/product/productCategoryFront'
	import { getPlatformCategory } from '@api/platform/platformCategory'
	import uploadImage from '../../common/uploadImage'
	export default {
		props: ["addPage"],
		components: {
			uploadImage
		},
		data() {
			return {
				thisAddPage: this.addPage,
				categoryFrom: {
					id: '',
					categoryName: '',
					categoryCode: '',
					categoryPicture: '',
					sort: '',
					isEnable: "0",
					categoryType: '',
					firstLevelId: 0,
					secondLevelId: 0,
					thirdLevelId: 0,
					platformCategoryId: '',
					remark: ""
				},
				rules: {
					categoryName: [{
							required: true,
							message: '请输入分类名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 32,
							message: '长度在 1 到 32 个字符',
							trigger: 'blur'
						}
					],
					categoryCode: [{
							required: true,
							message: '请输入分类编码',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 32,
							message: '长度在 1 到 32 个字符',
							trigger: 'blur'
						}
					],
					categoryType: [{
						required: true,
						message: '请选择分类类型',
						trigger: 'change'
					}, ],
					remark: [{
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}]
				},
				
				firstCategoryList: [],
				secondCategoryList: [],
				platformCategoryList: [],
				showFirstCategory: false,
				showSecondCategory: false,
				showCategoryPicture: false,
				
				isPic: false,
				imgType: 0,
				imgObject: {
					localMainImage: '',
					mainImage: ''
				},
			}
		},
		computed: {
			// ...mapState('d2admin/page', [ 'opened', 'current' ]),
			...mapState('d2admin/permission', ['shopId']),
			
			isCanEditPlatformCategory() {
				return this.shopId === 0 ? true : false;
			},
		},
		watch: {
			addPage(val) {
				this.thisAddPage = val; //②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
			},
			thisAddPage(val) {
				this.$emit("on-addPage-change", val); //③组件内对myResult变更后向外部发送事件通知
			}
		},
		methods: {
			closeAddChange() {
				this.thisAddPage = !this.thisAddPage;
				this.$refs['categoryFrom'].resetFields();
				this.imgObject = {
					localMainImage: '',
					mainImage: ''
				}
				this.showCategoryPicture = false;
				this.showFirstCategory = false;
				this.showSecondCategory = false;
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.categoryFrom.categoryType == 1) {
							if (this.categoryFrom.categoryPicture == '') {
								this.$message({
									message: '请上传图片',
									type: 'fail'
								});
								return false;
							}
						} else if (this.categoryFrom.categoryType == 2) {
							if (this.categoryFrom.firstLevelId == '') {
								this.$message({
									message: '请选择一级分类',
									type: 'fail'
								});
								return false;
							}
						} else if (this.categoryFrom.categoryType == 3) {
							if (this.categoryFrom.firstLevelId == '') {
								this.$message({
									message: '请选择一级分类',
									type: 'fail'
								});
								return false;
							}
							if (this.categoryFrom.secondLevelId == '') {
								this.$message({
									message: '请选择二级分类',
									type: 'fail'
								});
								return false;
							}
							if (this.categoryFrom.categoryPicture == '') {
								this.$message({
									message: '请上传图片',
									type: 'fail'
								});
								return false;
							}
						}
						this.loading = true
						save(this.categoryFrom).then(res => {
							this.$message({
								message: '保存成功',
								type: 'success'
							});
							this.$emit("on-loadlist-change"); //③组件内对myResult变更后向外部发送事件通知
							this.loading = false
							this.closeAddChange()
						}).catch(err => {
							console.log('err', err)
							this.loading = false
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.imgObject = {
					localMainImage: '',
					mainImage: ''
				},
				this.showCategoryPicture = false;
				this.showFirstCategory = false;
				this.showSecondCategory = false;
			},
			handleClose(done) {
				this.$confirm('确定关闭吗？').then(() => {
					done();
					this.$refs['categoryFrom'].resetFields();
					this.imgObject = {
						localMainImage: '',
						mainImage: ''
					}
				}).catch(() => {

				});
			},
			// ...mapActions('d2admin/page', ['close']),
			addPic(row) {
				this.imgType = 3;
				this.isPic = !this.isPic;
			},
			onPicChange(val) {
				this.isPic = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onPicResult(val) {
				this.imgObject = val;
				this.categoryFrom.categoryPicture = this.imgObject.mainImage;
			},
			fetchData() {
				this.loading = true;
				getPlatformCategory()
					.then(res => {
						let list = [];
						res.data.forEach(item => {
							if(item.isEnable && item.categoryType == 0) {
								list.push(item)
							}
						})
						this.platformCategoryList = list;
					});
			},
			emptyData() {
				this.categoryFrom.firstLevelId = '';
				this.categoryFrom.secondLevelId = '';
				this.firstCategoryList = [];
				this.secondCategoryList = [];
			},
			selectCategoryType(value) {
				if (value == 2) {
					this.emptyData();
					//展示一级分类、取消二级分类、取消图片
					this.showFirstCategory = true;
					this.showSecondCategory = false;
					this.showCategoryPicture = false;
					this.getAllFirstList();
				} else if (value == 3) {
					this.emptyData();
					//展示一二级分类、展示图片
					this.showFirstCategory = true;
					this.showSecondCategory = true;
					this.showCategoryPicture = true;
					this.getAllFirstList();
				} else {
					this.emptyData();
					//取消一二级分类、展示图片
					this.showFirstCategory = false;
					this.showSecondCategory = false;
					this.showCategoryPicture = true;
				}
			},
			getAllFirstList() {
				this.loading = true
				findAllFirstList({

				}).then(res => {
					this.firstCategoryList = res.data;
					this.loading = false;
				}).catch(err => {
					console.log('err', err);
					this.loading = false;
				})
			},
			selectFirstCategory(value) {
				this.categoryFrom.secondLevelId = '';
				this.secondCategoryList = [];
				this.getAllSecondList(value);
			},
			getAllSecondList(firstLevelId) {
				this.loading = true;
				findAllSecondList({
					firstLevelId: firstLevelId
				}).then(res => {
					this.secondCategoryList = res.data;
					this.loading = false;
				}).catch(err => {
					console.log('err', err);
					this.loading = false;
				});
			}
		},
		mounted() {
			this.fetchData();
		},
	}
</script>

<style scoped lang="scss">
	.el-card-logo {
		height: 256px !important;
		width: 256px !important;
		
		::v-deep .el-card__body {
			height: 254px !important;
			width: 254px !important;
			padding: 0px !important;
		}
	}

	.el-image {
		width: 100%;
		height: 100%;
	}
	::v-deep .image-slot {
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>
